<template>
	<view class="content">
		<view class="content-top">
			<view class="content-title">
			  <text>套餐详情</text>
			</view>
			<view class="tc-info">
				<image src="/static/store/fw1.png" ></image>
				<view class="tc-info-content">
					<view class="tc-info-content-title">
						{{package.name?package.name:""}}
					</view>
					<view class="tc-info-content-js">
						{{package.serviceProject?package.serviceProject:""}}
					</view>
					<view class="tc-info-content-cs">
						<text><image src="/static/images/store6.png" ></image>
						累计服务次数{{package.serviceNum?package.serviceNum:""}}次</text>
					</view>
				</view>
				<view class="tc-info-dz">
					周三8.8折
				</view>
				
				
			</view>
			<view class="info-tabs">
				<u-tabs :list="list" :activeStyle="{fontWeight: 'bold'}"  lineColor="#EB6140" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			
		</view>
		<view class="conntent-textnr">
			<mp-html v-if="current==0" :content="package.introduce"/>
			<mp-html v-if="current==1" :content="package.notice"/>
		</view>
		
		<view class="foods-k">
			<view class="foods-numk">
				<text class="red">￥</text>
				<view class="foods-k-num">
					
					<text>{{package.preferentialPrice?package.preferentialPrice:''}}<text class="red font-z">起</text></text>
					<view class="foods-k-dznum">
						￥{{package.originalPrice?package.originalPrice:''}}
					</view>
					
				</view>
				
				
			</view>
			
			
			<view class="foods-bt" @click="nextfun()">
				下一步
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {getPackageDetails} from "@/api/store";
	import {BASE_URL_IMAHE} from "../../../../utils/https";
	const app=getApp()
	
	export default {
		
		name: "tcdetailindex",
	  // watch: {
	  //   swiperCurrent(newValue, oldValue) {
	  //     this.order.size = 10;
	  //     this.order.current = 1;
	  //     this.orderFilter = [];
	  //     this.myOrder();
	  //     console.log(newValue, "新的");
	  //     console.log(oldValue, "旧的");
	  //   },
	  // },
	  data() {
	    return {
			list:[
				{
									name: '套餐介绍'
								}, {
									name: '预约须知'
								}
			],
			packageId:"",
			package:{},
			shopId:"",
			current: 0,
	    
	    };
	  },
	  onLoad(options) {
		  console.log(options)
		  this.packageId=options.packageId
		  this.shopId=options.shopId
		  this.getPackageDetailsfun()
	   
	  },
	  onShow() {
	  },
	  //上拉
	  onReachBottom() {
	  },
	  methods: {
		  nextfun(){
			  uni.navigateTo({
			  	url:"/pages/subpackage/reservation/index?packageId="+this.packageId+"&shopId="+this.shopId+"&originalPrice="+this.package.originalPrice
			  })
		  },
		  //获取详情
		  async getPackageDetailsfun(){
			  var res=await getPackageDetails(JSON.stringify({packageId:this.packageId}) )
			  console.log(res)
			  if(res.result==0){
				  this.package=res.package
			  }
		  },
		  change(index) {
		  				this.current = index.index;
		  			},
					
		httpUrlFn(item) {
		  return  BASE_URL_IMAHE + item;
		},
	    
	  },
	};
	
</script>

<style lang="scss">
	.content-top{
		width: 750rpx;
		height: 565rpx;
		background: linear-gradient(360deg, rgba(255,255,255,0.1) 3%, rgba(243,182,168,0.1) 16%, #EB5F3F 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin: 0 auto;
		position: relative;
		.content-title{
			width: 100%;
			height: 173rpx;
			background: #EB6140;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			text-align: center;
			padding-top: 107rpx;
			text{
				font-size: 33rpx;
				color: #FFFFFF;
				line-height: 46rpx;
				
			}
		}
		.tc-info{
			width: 720rpx;
			height: 218rpx;
			padding: 20rpx 20rpx;
			border-radius: 35rpx;
			overflow: hidden;
			background-color: #FFFFFF;
			margin: 20rpx auto 0rpx;
			box-sizing: border-box;
			display: flex;
			position: relative;
			.tc-info-dz{
				position: absolute;
				right: 0;
				top: 0;
				background-color: #F8EAD1;
				color: #BE6C43;
				font-size: 26rpx;
				padding: 20rpx 5rpx 10rpx 20rpx;
				border-bottom-left-radius: 25rpx;
			}
			image{
				width: 178rpx;
				height: 178rpx;
			}
			.tc-info-content{
				display: flex;
				width: 480rpx;
				flex-direction: column;
				margin-left: 20rpx;
				.tc-info-content-title{
					width: 100%;
					height: 40rpx;
					font-size: 32rpx;
					font-weight: bold;
					margin-top: 45rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
				}
				.tc-info-content-js{
					font-size: 28rpx;
					margin-top: 5rpx;
					color: #7F8080;
				}
				.tc-info-content-cs{
					width: auto;
					// display: initial;
					margin-top: 10rpx;
					
					display: flex;
					align-items: center;
					
					image{
						width: 23rpx;
						height: 23rpx;
						line-height: 35rpx;
						margin-right: 5rpx;
					}
					text{
						background-color: #F7F5F6;
						border-radius: 25rpx;
						padding: 5rpx 20rpx;
						line-height: 30rpx;
						font-size: 23rpx;
						
					}
				}
			}
			
		}
		.info-tabs{
			position: absolute;
			left: 45rpx;
			bottom: 26rpx;
		}
		
	}
	.foods-k{
		padding: 43rpx 40rpx 53rpx;
		background-color: #F3F3F3;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		
		.foods-numk{
			display: flex;
			text-align: end;
			.red{
				font-size: 22rpx;
				line-height: 62rpx;
				color: #EB6140;
			}
			.foods-k-num{
				font-size: 44rpx;
				color: #EB6140;
				line-height: 62rpx;
				display: flex;
				align-items: flex-end;
				.foods-k-dznum{
					font-size: 22rpx;
					color: #8E8E8E;
					line-height: 31rpx;
					text-align: end;
					margin-bottom: 15rpx;
					margin-left: 23rpx;
					text-decoration: line-through;
				}
				
			}
			
		}
		.foods-bt{
			width: 173rpx;
			height: 55rpx;
			background-color: #E85335;
			color: #FFFFFF;
			text-align: center;
			line-height: 55rpx;
			border-radius: 25rpx;
		}
	}
	.conntent-textnr{
		width: 100%;
		box-sizing: border-box;
		padding: 0 rpx(10);
		padding-top: rpx(10);
		background-color: white;
		padding-bottom: 180rpx;
		
		 image {
		  vertical-align: middle;
		  width: 750rpx !important;
		  height: auto;
		}
	}
	/* .sty{
		backgroundColor: ;
		font-weight: bold;
	} */
</style>